<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>09_自定义JS对象</title>
    </head>
    <body>
        <table border="1px">
            <caption>商品表</caption>
            <tr>
                <th>商品标题</th>
                <th>商品价格</th>
                <th>商品库存</th>
            </tr>


        </table>
        <script>
            //定义数组,用来模拟从服务器获取到商品数据
            let productArr = [
                {title:'小米14',price:8000,num:200},
                {title:'华为Mate60',price:5000,num:100},
                {title:'苹果16',price:10000,num:700},
                {title:'苹果16',price:10000,num:700},
                {title:'魅族',price:2000,num:500},
            ];
            //1.获取表格元素
            let table = document.querySelector('table');
            //2.遍历商品数组,数组中有几条数据,表格就有几行
            for(let i=0;i<productArr.length;i++){
                //3.循环n次,就生成n个tr与3*n个td
                let tr = document.createElement('tr');//<tr></tr>
                let titleTd = document.createElement('td');//<td></td>
                let priceTd = document.createElement('td');//<td></td>
                let numTd = document.createElement('td');//<td></td>
                //4.将当前遍历到的商品的属性依次装入单元格里
                titleTd.innerHTML = productArr[i].title;
                priceTd.innerHTML = productArr[i].price;
                numTd.innerHTML = productArr[i].num;
                //5.将准备好的td装入tr中
                tr.append(titleTd,priceTd,numTd);
                //6.将tr装入table中
                table.append(tr);
            }

            //1.定义一个自带属性与方法的JS对象
            let p1 = {
                name:'张三',
                age:18,
                say:function(){
                    console.log('我是'+this.name+',今年'+this.age+'岁了!');
                }
            }
            console.log(p1);
            console.log(p1.name);
            console.log(p1.age);
            p1.say();

            //2.先定义一个空对象,在动态给对象设置属性和方法
            let p2 = {};
            p2.name='李四';
            p2.age = 20;
            p2.say=function(){
                console.log('我是'+this.name+',今年'+this.age+'岁了!');
            };
            console.log(p2);
            console.log(p2.name);
            console.log(p2.age);
            p2.say();
        </script>
    </body>
</html>